<!-- -->
// TODO 系统日志
<template>
  <div class="systemlog">
    <el-container>
      <el-header>
        <div class="Bar">
          
          <div class="rightButton">
            <span>显示：</span>
            <el-select v-model="select" placeholder="选择条数">
              <el-option label="10 条" value="10"></el-option>
              <el-option label="20 条" value="20"></el-option>
              <el-option label="30 条" value="30"></el-option>
              <el-option label="40 条" value="40"></el-option>
            </el-select>
            <span>共有数据：{{totalSize}} 条</span>
            <el-button icon="el-icon-refresh" type="success" @click="refresh()">刷新</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;margin-top:2%;"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <!-- <el-table-column prop="createTime" label="日期"> -->
            <!-- <template slot-scope="scope">{{ scope.row.create_time }}</template> -->
          <!-- </el-table-column> -->
          
          <el-table-column prop="createTime" label="日期" width="160"></el-table-column>
          <el-table-column prop="id" label="日志id" width="120"></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="method" label="请求方法" show-overflow-tooltip></el-table-column>
          <el-table-column prop="param" label="请求参数" show-overflow-tooltip></el-table-column>
          <el-table-column prop="username" label="用户" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ip" label="ip地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="times" label="响应时长/ms" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="danger"
                    @click.native.prevent="handleDelete(scope.$index, tableData)"
                  >删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-main>
      <el-footer>
        <el-button @click="pre" :disabled="preBool">上一页</el-button>
        <el-input v-model="pageNum" readonly="readonly" style="width:60px;"></el-input>
        <el-button @click="add" :disabled="addBool">下一页</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "SystemLog",
  data() {
    return {
      totalLog: 1000,
      select: "",
      // 分页
      pageNum: 1,
      addBool: false,
      preBool: true,
      pageSize: 10,
      totalPages: "",
      totalSize: "",
      pages: "",

      tableData: [],
      multipleSelection: []
    };
  },
  created(){
    this.getSystemLog();
  },

  watch: {
    pageNum: function(Val) {
      if (Val === 1) {
        this.preBool = true;
        this.addBool = false;
      } else if (Val === this.totalPages) {
        this.addBool = true;
        this.preBool = false;
      } else {
        this.preBool = false;
        this.addBool = false;
      }
    },
    select:function (Val) {
        this.pageSize = Val;
        this.pageNum = 1;
        this.getSystemLog();
        // console.log(this.total);
    }
  },
  components: {},

  filters: {},

  computed: {},

  methods: {
    add() {
      if (this.pageNum < this.totalPages) {
        this.pageNum++;
        this.getSystemLog();
      } else {
        this.addBool = true;
      }
    },
    pre() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.getSystemLog();
      } else {
        this.preBool = true;
      }
    },
    // 成功函数
    Success(index) {
      this.$message.success(index);
    },
    // 失败函数
    Fail(index) {
      this.$message.error(index);
    },
    // 刷新
    // refresh() {
    //   this.pageNum = 1;
    //   this.pageSize = 10;
    //   this.searchShop = "";
    //   this.getSystemLog();
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    handleDelete(index, row) {
      console.log(index, row);
      row.splice(index, 1);
    },
    // 用来批量删除
    // handleDeleteAll(){

    // },
    refresh(){
      this.getSystemLog();
    },
    getSystemLog(){
      this.axios.put('/api/log',{
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }).then((res)=>{
        console.log(res.data);
        let result = res.data.data;
        if(res.data.code == 200){
          this.tableData = result.content;
          this.pageNum = result.pageNum;
          this.pageSize = result.pageSize;
          this.totalPages = result.totalPages;
          this.totalSize = result.totalSize;
          this.select = result.pageSize;
        }
      })
    }

  }
};
</script>
<style scoped>
.systemlog {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
}
.el-main {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.el-main::-webkit-scrollbar{
  display: none;
}
.el-header {
  line-height: 60px;
}
.el-footer {
  line-height: 60px;
  text-align: right;
}
.leftButton {
  height: 60px;
  float: left;
}
.rightButton {
  height: 60px;
  float: right;
  margin-right: 14px;
}
.rightButton span {
  margin-right: 14px;
}
.Bar {
  height: 60px;
  width: 100%;
  margin-bottom: 14px;
  /* background-color: rebeccapurple; */
}
.el-select {
  width: 120px;
  margin-left: 14px;
  margin-right: 14px;
}
</style>